<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<link th:href="@{/ajax/libs/iCheck/custom.css}" rel="stylesheet"/>

<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="formId">

        <!--<div class="form-group">-->
            <!--<label class="col-sm-3 control-label">标题(Title)：</label>-->
            <!--<div class="col-sm-8">-->
                <!--<input name="title" class="form-control"  type="text">-->
            <!--</div>-->
        <!--</div>-->

        <!--<div class="form-group">-->
            <!--<label class="col-sm-3 control-label">类型：</label>-->
            <!--<div class="col-sm-8">-->
                <!--<select name="leaveType" class="form-control select2-hidden-accessible">-->
                    <!--<option value=""> - - </option>-->
                    <!--<option value="0">事假</option>-->
                    <!--<option value="1">病假</option>-->
                    <!--<option value="2">公假</option>-->
                <!--</select>-->
            <!--</div>-->
        <!--</div>-->

        <div class="form-group">
            <label class="col-sm-3 control-label">审批人(Approver)：</label>
            <div class="col-sm-8">
                <!--<input name="roomName" type="text" th:value="${roomName}"  class="form-control"/>-->
                <!--<select name="agent_Id" class="form-control select2-hidden-accessible">-->
                    <!--<option value=""></option>-->
                    <!--<option th:each="user:${users}" th:value="${user.uid}" th:text="${user.name}"></option>-->
                <!--</select>-->
                <!-- 正式上线切换开始 -->
                <input readonly="readonly" id="name" name="name" th:field="${user.name}" class="form-control"  type="text">
                <!-- 正式上线切换结束 -->
            </div>
</div>

        <div class="form-group">
            <label class="col-sm-3 control-label">客户(Customer)：</label>
            <div class="col-sm-8">
                <!--<input id="customer" name="customer" class="form-control" type="text">-->
                <select id="customer" name="customer" class="form-control">
                    <option value=""> - - </option>
                    <option th:each="keyAccount:${keyAccounts}" th:value="${keyAccount.keyAccount}" th:text="${keyAccount.keyAccount}"></option>
                </select>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">支持项目(Project)：</label>
            <div class="col-sm-8">
                <!--<input id="supportingProject" name="supportingProject" class="form-control" type="text">-->
                <select id="supportingProject" name="supportingProject" class="form-control">
                    <option value=""> - - </option>
                    <!-- th:value保存的值，th:text前端显示内容  -->
                    <!--正式上线改 itemCode 改为 projectName-->
                    <option th:each="projectInfo:${projectInfos}" th:value="${projectInfo.itemCode}" th:text="${projectInfo.itemCode}"></option>
                </select>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">普工(Normal)：</label>
            <div class="col-sm-5">
                <input id="requestedOne" name="requestedOne" class="form-control" type="text" lay-verify="number">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">缝工(Sewing)：</label>
            <div class="col-sm-5">
                <input id="requestedTwo" name="requestedTwo" class="form-control" type="text" lay-verify="number">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">开始时间(Start Time)：</label>
            <div class="col-sm-8">
                <input readonly="readonly" name="leaveTime" id="leaveTime" onchange="getTime" class="form-control" type="text" placeholder="yyyy-MM-dd HH:mm">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">结束时间(End Time)：</label>
            <div class="col-sm-8">
                <input readonly="readonly" name="expireTime" id="expireTime" onchange="getTime" class="form-control" type="text" placeholder="yyyy-MM-dd HH:mm">
            </div>
        </div>

        <!--<div class="form-group">-->
            <!--<label class="col-sm-3 control-label">时间合计(Total Time)：</label>-->
            <!--<div class="col-sm-3">-->
                <!--<input readonly="readonly" id="totalTime" name="totalTime" class="form-control" type="text">-->
            <!--</div>-->
        <!--</div>-->


        <!-- 时间差测试代码 START-->
        <!--<div class="layui-input-inline">-->
            <!--请选择开始时间：<input class="layui-input" placeholder="请选择开始日期" id="LAY_demorange_s" >-->
        <!--</div>-->
        <!--<div class="layui-input-inline">-->
            <!--请选择截止时间：<input class="layui-input" placeholder="请选择截止时间" id="LAY_demorange_e" >-->
        <!--</div>-->
        <!--<div class="layui-input-inline">-->
            <!--<input type="button" value="计算时间差" onclick="check()" >-->
            <!--<input class="layui-input" placehlder="时间间隔" id="dayscountshow">-->
        <!--</div>-->
        <!-- 时间差测试代码 END-->


        <div class="form-group">
            <label class="col-sm-3 control-label">备注(Remark)：</label>
            <div class="col-sm-8">
                <textarea name="leaveContent" type="text"
                          class="form-control"></textarea>
            </div>
        </div>

        <div class="form-group">
            <div class="form-control-static col-sm-offset-9">
                <button type="submit" class="btn btn-primary">确定</button>
                <button onclick="$.modal.close()" class="btn btn-danger" type="button">关闭</button>
            </div>
        </div>
    </form>
</div>
<div th:include="include::footer"></div>
<script th:src="@{/ajax/libs/select/select2.js}"></script>
<script type="text/javascript">

    var prefix = "/leave";

    $("#formId").validate({
        rules:{
//            leaveType:{
//                required:true,
//            },
            leaveTime:{
                required:true,
            },
            expireTime:{
                required:true,
            },
//            title:{
//                required:true,
//            },
//            agent_Id:{
//                required:true,
//            },
            leaveContent:{
                required:true,
                maxlength:200,
            },
            customer:{
                required:true,
            },
            supportingProject:{
                required:true,
            },
            requestedOne:{
                required:true,
                number: true
            },
            requestedTwo:{
                required:true,
                number: true
            },
        },
        submitHandler: function(form) {
            $.operate.save(prefix + "/addSave", $('#formId').serialize());
        }
    });


    layui.use('laydate',function () {
        var laydate=layui.laydate;
        $(this).removeAttr("lay-key");//时间框一点就消失处理
        //时间选择器
        var leaveTime = laydate.render({
            elem: '#leaveTime',
            type: 'datetime',
            trigger : 'click',//时间框一点就消失处理
            max: "2099-12-31",
            min:minDate(),
            lang: 'en',
            format:'yyyy-MM-dd HH:mm',
            done: function (value, date, endDate) {
                expireTime.config.min ={
                    year:date.year,
                    month:date.month-1,
                    date: date.date
                };
                var startDate = new Date(value).getTime();
                var endTime = new Date($('#expireTime').val()).getTime();
                if (endTime < startDate) {
                    layer.msg('结束时间不能小于开始时间，请重新选择');
                    $('#leaveTime').val($('#expireTime').val());
                }
            }
        });
        var expireTime = laydate.render({
            elem: '#expireTime',
            type: 'datetime',
            trigger : 'click',//时间框一点就消失处理
            min: "1970-1-1",
            lang: 'en',
            format:'yyyy-MM-dd HH:mm',
            min:minDate(),
            done: function (value, date, endDate) {
                leaveTime.config.max={
                    year:date.year,
                    month:date.month-1,
                    date: date.date
                }
                var startDate = new Date($('#leaveTime').val()).getTime();
                var endTime = new Date(value).getTime();
                if (endTime < startDate) {
                    layer.msg('结束时间不能小于开始时间，请重新选择');
                    $('#expireTime').val($('#leaveTime').val());
                }
            }
        });
    })

    function minDate(){
        var now = new Date();
        return now.getFullYear()+"-" + (now.getMonth()+1) + "-" + now.getDate();
    }


    function getTime() {
        var end = $('#expireTime').val();
        var start = $('#leaveTime').val();
        var sun = end.valueOf() - start.valueOf()
        $('#totalTime').val(sun)
    }




//    <!-- 时间差测试代码 START-->
//    layui.use(['layer','laydate'],function(){
//        var $=layui.jquery,
//            layer=layui.layer,laydate=layui.laydate;
//        var start={
//            type: 'datetime',
//            min:'1970-01-01 00:00:00'
//            ,max:'2099-12-31 23:59:59'
//            ,istoday:false
//            ,choose:function(dates){
//                end.min=dates;
//                end.start=dates;
//            }
//        }
//        var end={
//            type: 'datetime',
//            min:laydate.now()
//            ,max:'2099-12-31 23:59:59'
//            ,istoday:true
//            ,choose:function(dates){
//                start.max=dates;
//            }
//        }
//        document.getElementById('LAY_demorange_s').onclick=function(){
//            start.elem=this;
//            laydate(start);
//        }
//        document.getElementById('LAY_demorange_e').onclick=function(){//调用laydate选择时间
//            end.elem=this;
//            laydate(end);
//        }
//    });
//    function check(){
//
//        var start=document.getElementById("LAY_demorange_s").value;//获取起始日期
//        var end=document.getElementById("LAY_demorange_e").value;//获取结束日期
//        if(start==""){
//            alert("请输入开始日期！");
//            return;
//        }
//        else if(end==""){
//            alert("请输入结束日期！");
//        }
//        document.getElementById("dayscountshow").value=getDays(start, end);
//    }
//    function getDays(startDate,endDate){
//        var date1Str = startDate.split("-");//将日期字符串分隔为数组，数组元素分别为年、月、日
//    //根据年、月、日的值创建Date对象
//        var date1Obj = new Date(date1Str[0],(date1Str[1]-1),date1Str[2]);
//        var date2Str = endDate.split("-");
//        var date2Obj = new Date(date2Str[0],(date2Str[1]-1),date2Str[2]);
//        var t1 = date1Obj.getTime();//返回从1970-1-1开始计算到Date对象中的时间之间的毫秒数
//        var t2 = date2Obj.getTime();//返回从1970-1-1开始计算到Date对象中的时间之间的毫秒数
//        var datetime=1000*60*60*24; //一天时间的毫秒值
//        var minusDays = Math.floor(((t2-t1)/datetime));//计算出两个日期天数差
//        var days = Math.abs(minusDays);//如果结果为负数，取绝对值
//        return days;
//
//    }
//
//    <!-- 时间差测试代码 END-->



</script>
</body>
</html>
